<template>
  <div>
    <!-- 搜索框 -->
    <div class="searchBox">
      <van-search
        background="#cc0000"
        shape="round"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        v-model="value"
      >
        <template #action>
          <div @click="onSearch" v-if="$store.state.isLogin">
            <router-link :to="{ path: '/postPublish' }">
              <van-icon class="publish" name="add-o"  @click="pleaseLogin"/>
            </router-link>
          </div>
          <div v-else >
            <img :src="$store.state.userInfo.avatar" alt="" style="width: 36px;height:36px;border-radius: 18px;">&nbsp;&nbsp;
            <!-- <span class="upload">发表</span> -->
            <div class="uploadBox">
              <router-link :to="{ path: '/postPublish' }">
                <van-icon class="upload" name="plus"/>
              </router-link>
            </div>
            
          </div>
          
        </template>
      </van-search>
    </div>
  </div>
</template>
<script>
import { userInfo } from '../api/api'
import { Dialog } from 'vant';

export default {
  name: "indexHeader",
  components: {
    // [Dialog.Component.name]: Dialog.Component,
  },
  data() {
    return {
      value: "",
      userInfo:{},
    };
  },
  created(){
    userInfo().then((res) => {
        this.userInfo = res.data;
      });
  },
  methods: {
    onSearch() {},
    pleaseLogin(){
      
      Dialog.alert({
  message: '您还没有登录',
}).then(() => {
  // on close
});
    }
  },
  watch: {
    value: function () {
      console.log(this.value);
      // 父子组件传值
      this.$emit("search", this.value);
    },
  },
};
</script>
<style scoped lang="less">
.upload {
   font-size: 22px;
   color: #fff;
}
.uploadBox {
  float: right;
  font-size: 43px;
  margin-top: 12%;
  overflow: hidden;
}
// 搜索框
/deep/.van-search__content {
  border-radius: 40px;
}
/deep/.van-search__content {
  background-color: #fff;
}
/deep/.van-search__action {
  padding: 0 18px;
}
.van-search__action:active {
  background-color: rgb(204, 0, 0);
}

.publish {
  font-size: 34px;
  color: #fff;
  display: inline-block;
  margin-top: -12%px;
}
/deep/.van-search__action {
  line-height: 3px;
}
</style>
